// 未盘点客户列表
import * as React from 'react';
import { useEffect, useState } from 'react'
import { Button, Col, Row, Spin, Table } from 'antd';
import './index.scss';
import { http } from '@/lib';
import apis from "@/apis/Report"
const NotCheckedCustomerList = (props) => {
    // const spanUI = {color: '#000', fontWeight: 'bolder'} as any;
    const spanUI = {} as any;
    // const { state } = props.location;
    // 返回上个界面，传递给HeaderTitle组件
    const backToDetail = () => {
        props.history.go(-1);
        sessionStorage.removeItem('noNumberPlateList');
        sessionStorage.removeItem('inventoryCycle');
    }
    let pathnameStr = props.history.location.pathname.split('/');
    
    let belongAreaCode = pathnameStr[pathnameStr.length - 1].split('&')[0];
    
    // let noNumberPlateList = pathnameStr[pathnameStr.length - 1].split('&')[1].split('=')[1];
    useEffect(() => {
        // console.log(props);
        // console.log(!props.location.state)
        // if (!props.location.state && !sessionStorage.getItem('inventoryCycle')) {
        //     props.history.push('/report/stockcustomercountreport');
        //     return;
        // }
        if (!sessionStorage.getItem('noNumberPlateList') || sessionStorage.getItem('noNumberPlateList') === 'undefined'  || sessionStorage.getItem('noNumberPlateList') === 'null') {
            sessionStorage.setItem('noNumberPlateList', JSON.stringify(props.location.state?.record?.inventoryCustomerBeanListVo?.noNumberPlateList));
            // let inventoryCycle = props.location.state?.record?.inventoryTime.split('-');
            let inventoryCycle = props.location.state?.record?.inventoryTime;
            // inventoryCycle[1] = parseInt(inventoryCycle[1]) + '月';
            // inventoryCycle[0] = inventoryCycle[0] + '年';
            // inventoryCycle = inventoryCycle.join('');
            sessionStorage.setItem('inventoryCycle', JSON.stringify(inventoryCycle));
        }
        // return () => {
        //     sessionStorage.removeItem('hasNumberPlateList');
        // }
    }, [])
    // table 的loading
    const [loading, setLoading] = useState(false);
    // 
    const [firstCome, setFirstCome] = useState(true);
    // table的pagination
    const [pagination, setPagination] = useState({
        page: 1, current: 1, pageSize: 10, showSizeChanger: true, showQuickJumper: true, pageSizeOptions: ['10', '20', '40', '60', '100', '150', '200'],total: 0,
        showTotal: (total, range) => `当前${range[0]}-${range[1]},共${total}项`
    })

    const [dataSource, setDataSource] = useState<any>([])
    useEffect(() => {
        // if (!firstCome) {
            setLoading(true);
            // console.log(props.location.state?.record?.inventoryCustomerBeanListVo?.noNumberPlateList);
            let noNumberPlateList = props.location.state?.record?.inventoryCustomerBeanListVo?.noNumberPlateList || JSON.parse(sessionStorage.getItem('noNumberPlateList'))
            let inventoryCycle = JSON.parse(sessionStorage.getItem('inventoryCycle'));
            let brandCode = JSON.parse(sessionStorage.getItem('stateForCheckedCustomerList')).brandCode;
            // 请求数据，先从url中获取brandcode
            http.post(apis.InOrderToInventoryList, {
                page: pagination.page, size: pagination.pageSize, belongAreaCode: belongAreaCode, noNumberPlateList: noNumberPlateList, inventoryCycle: inventoryCycle,
                brandCode: brandCode
            })
            // http.get(apis.InOrderToInventoryList, {params: {page: pagination.page, size: pagination.pageSize, belongAreaCode: belongAreaCode, hasNumberPlateList: hasNumberPlateList}})
                .then(res => {
                    let data = res.data.content;
                    data.forEach((item, index) => {
                        if(item.createTime) {
                            let year = item.createTime.split('-')[0];
                            let month = item.createTime.split('-')[1];
                            item.createTime = year + '年' + month + '月';
                        }
                        if (item.inventoryEndTime) {
                            item.inventoryEndTime = item.inventoryEndTime.split('T').join(' ');
                        }
                        
                        item.key = index;
                    })
                    setDataSource(res.data.content);
                    setPagination({...pagination, total: res.data.totalElements});
                    setLoading(false);
                })
                .catch(err => {
                    setLoading(false);
                    throw err
                })
            // !state && props.history.push('/quota/report/stockcustomercountreport');
            
        // };
        firstCome && setFirstCome(false);
    // }, [pagination.pageSize, pagination.page]);
    }, []);
    // 未盘点客户列表列标题
    const columns = [
        {
            title: <span style={spanUI}>序号</span>,
            key: 'number',
            align: 'center',
            render: (text, record, index) => {
                return <span>{(pagination.page - 1) * pagination.pageSize + index + 1}</span>
            }
        },
        {
            title: <span style={spanUI}>客户编码</span>,
            key: 'dealerCode',
            dataIndex: 'dealerCode',
            align: 'center'
        },
        {
            title: <span style={spanUI}>客户名称</span>,
            key: 'dealerName',
            dataIndex: 'dealerName',
            align: 'center'
        },
        {
            title: <span style={spanUI}>客户类型</span>,
            key: 'dealerType',
            dataIndex: 'dealerType',
            align: 'center',
            render: () => {
                return '经销商'
            }
        },
        {
            title: <span style={spanUI}>销售组织</span>,
            key: 'brandName',
            dataIndex: 'brandName',
            align: 'center'
        },
        {
            title: <span style={spanUI}>所属管理区域</span>,
            key: 'belongAreaName',
            dataIndex: 'belongAreaName',
            align: 'center'
        },
        {
            title: <span style={spanUI}>关联业务员</span>,
            key: 'createName',
            dataIndex: 'createName',
            align: 'center'
        },
        {
            title: <span style={spanUI}>盘点周期</span>,
            // key: 'inventoryBegineTime',
            // dataIndex: 'inventoryBegineTime',
            key: 'description',
            dataIndex: 'description',
            align: 'center',
            // render: (text, record) => {
            //     if (record.inventoryBegineTime === null || record.inventoryEndTime === null) {
            //         return '--';
            //     }
            //     let year = text?.split(' ')[0].split('-')[0];
            //     let month = parseInt(text?.split(' ')[0].split('-')[1]);
            //     return <span>{year + '年' + month + '月'}</span>
            // }
        }
    ]
    
    return (
        <React.Fragment>
            <HeaderTitle backToDetail={backToDetail}/>
            {/* 渲染的table */}
            <Spin spinning={loading}>
                <Table 
                    dataSource={dataSource}
                    
                    columns={columns as any}
                    pagination={pagination}
                    onChange={(pageOptions) => {
                        setPagination({
                            ...pagination, pageSize: pageOptions.pageSize, current: pageOptions.current, page: pageOptions.current
                        })
                    }}
                />
            </Spin>
        </React.Fragment>
    )
}

function HeaderTitle(props){
    const { backToDetail } = props;
    return (
        <React.Fragment>
            <Row justify="space-around" align="bottom" gutter={24} style={{paddingTop: '10px'}}>
                <Col offset={0} span={22}>
                    <span className="notCheckedCustomerList-title">未盘点客户列表</span>
                </Col>
                <Col offset={0} span={2}>
                    <Button onClick={() => {backToDetail()}} type="primary">返回</Button>
                </Col>
            </Row>
        </React.Fragment>
    )
}

export default NotCheckedCustomerList;